<!DOCTYPE html>
<html>
<head>
    <title>截图OCR识别</title>
</head>
<body>
    <h1>截图OCR识别</h1>
    
    <!-- 方式1：直接上传文件 -->
    <div>
        <h3>上传图片文件</h3>
        <input type="file" id="fileInput" accept="image/*">
        <button onclick="uploadFile()">识别</button>
    </div>
    
    <!-- 方式2：粘贴截图 -->
    <div>
        <h3>粘贴截图 (Ctrl+V)</h3>
        <textarea id="pasteArea" placeholder="在此粘贴截图" style="width: 500px; height: 200px;"></textarea>
        <button onclick="uploadBase64()">识别</button>
    </div>
    
    <!-- 结果展示 -->
    <div id="result"></div>

    <script>
        // 处理文件上传
        async function uploadFile() {
            const fileInput = document.getElementById('fileInput');
            if (!fileInput.files.length) return;
            
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            
            try {
                const response = await fetch('/api/ocr/', {
                    method: 'POST',
                    body: formData
                });
                const data = await response.json();
                showResults(data);
            } catch (error) {
                alert('识别失败: ' + error.message);
            }
        }
        
        // 处理粘贴的Base64截图
        async function uploadBase64() {
            const pasteArea = document.getElementById('pasteArea');
            const base64Data = pasteArea.value.trim();
            
            if (!base64Data) {
                alert('请先粘贴截图');
                return;
            }
            
            try {
                // 创建Blob对象模拟文件上传
                const blob = new Blob([base64Data], { type: 'text/plain' });
                const formData = new FormData();
                formData.append('file', blob, 'screenshot.txt');
                
                const response = await fetch('/api/ocr/', {
                    method: 'POST',
                    body: formData
                });
                const data = await response.json();
                showResults(data);
            } catch (error) {
                alert('识别失败: ' + error.message);
            }
        }
        
        // 显示结果
        function showResults(data) {
            const resultDiv = document.getElementById('result');
            if (data.status !== 'success') {
                resultDiv.innerHTML = `<p style="color:red">错误: ${data.detail}</p>`;
                return;
            }
            
            let html = `<h3>识别结果 (${data.count}条)</h3><ul>`;
            data.results.forEach(item => {
                html += `<li>${item}</li>`;
            });
            html += `</ul>`;
            resultDiv.innerHTML = html;
        }
        
        // 监听粘贴事件（可选增强）
        document.addEventListener('paste', (e) => {
            const items = (e.clipboardData || window.clipboardData).items;
            for (let item of items) {
                if (item.type.indexOf('image') !== -1) {
                    const blob = item.getAsFile();
                    const reader = new FileReader();
                    reader.onload = (event) => {
                        document.getElementById('pasteArea').value = event.target.result;
                    };
                    reader.readAsDataURL(blob);
                }
            }
        });
    </script>
</body>
</html>